<!-- 使用说明：
  使用之前请修改代码中第37-39行处变量models里的模型地址。
 -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>模型浏览器</title>

  <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
  <link href="http://gb9.bimsop.com/bimsopviewer/release/v0.3/style-bottom.css" rel="stylesheet">
  <script src="http://gb9.bimsop.com/bimsopviewer/release/v0.3/three.min.js"></script>
  <script src="http://gb9.bimsop.com/bimsopviewer/release/v0.3/viewer.min.js"></script>
  <style>
    #viewer {
      height: 100%;
      /* width: 1000px; */
    }

    #backtohome {
      padding-bottom: 20px;
    }
  </style>
</head>

<body style="margin:0">
  <button onclick="switchModel()">加载模型</button>
  <button onclick="switchModel()">切换模型</button>
  <button onclick="startPoi()">进入POI模式</button>
  <button onclick="stopPoi()">退出POI模式</button>
  <br>
  <div id="viewer" class="left">
  </div>
  <script>

    var models = [
      { url: './models/cabletray/cabletray.gbim' },
      { url: './models/nengyun-builtin-walls/nengyun-builtin-walls.gbim' }
    ];

    var BV = Bimsop.Viewing;
    var viewer, _currentModel, poiManager;

    var config = {
      disabledExtensions: {
        draw: true,
        measure: true,
        section: true,
      }
    }

    var _currentModelIndex = 1;

    function switchModel() {
      _currentModelIndex = 1 - _currentModelIndex;
      initViewer(models[_currentModelIndex].url);
    }

    function initViewer(url) {
      if (viewer) {
        viewer.tearDown();
      }
      var viewerEl = document.getElementById('viewer');
      viewer = new BV.Private.GuiViewer3D(viewerEl, {});
      var options = { env: 'Local' };
      BV.Initializer(options, function () {
        viewer.start();
        // 注意：新的viewer启动之前，需要清除旧的poiManager内容
        if (poiManager) {
          poiManager.dispose();
        }
        poiManager = new PoiManager(viewer);

        viewer.load(url, config, function (model) {
          _currentModel = model;
        }, function (err, errmsg) {
          if (err) console.log(err, errmsg)
        });

      });  //Viewing.Initializer
    }

    /**
     * 进入Poi模式
     */
    function startPoi() {
      if (!poiManager) {
        poiManager = new PoiManager(viewer);
      }
      poiManager.enterPoiMode();
    }
    /**
     * 离开Poi模式
     */
    function stopPoi() {
      if (poiManager)
        poiManager.exitPoiMode();
    }

    class PoiManager {
      constructor(viewer) {
        this.viewer = viewer;
        this.drawPointBinded = this.drawPoint.bind(this);
        this.drawer = new Bimsop.Viewing.PoiDrawer(this.viewer);
        this.isInPoiMode = false;
        this.presetId = 'default'; // default是默认的preset
        this.setPreset('my-custom-preset-id');
      }

      /**
       * 如果要修改默认的poi的样式，可以使用此方法
       * @param {String} id 给定poi的id
       * @param {Function} setStyle 可以在这里设置样式
       */
      setPreset(id, setStyle) {
        var d = this.drawer;
        if (d) {
          d.addPreset(id, setStyle || this.setPoiDefaultStyle);
          this.presetId = id;
        }
      }

      setPoiDefaultStyle(div, id) {
        // 这里可以随便设置className等，自己再通过js或者css调整对应的style
        div.className = "pin-container";
        div.style.position = "absolute";
        div.style.pointerEvents = "auto";
        const btn = document.createElement("plan");
        btn.className = "pin-btn";
        btn.innerText = '';
        div.appendChild(btn);
        return div;
      }

      enterPoiMode() {
        if (this.isInPoiMode) return;
        this.isInPoiMode = true;
        this.viewer.container.addEventListener("click", this.drawPointBinded);
      }

      exitPoiMode() {
        this.isInPoiMode = false;
        this.viewer.container.removeEventListener("click", this.drawPointBinded);
      }

      drawPoint(e) {
        //屏幕坐标和模型坐标换算
        this.viewer.toolController.__clientToCanvasCoords(e);

        var basePoint = this.viewer.impl.hitTestViewport(
          new THREE.Vector3(e.normalizedX, e.normalizedY),
          false
        );

        if (basePoint) {
          var poiObj = this.drawer.draw(basePoint.intersectPoint, 2, this.presetId);
          // 保存任意data
          poiObj.data = { creationDate: new Date() };
          poiObj.onClick = () => {
            console.log(`我poi被点击了, position: ${JSON.stringify(poiObj.position)}, data: ${JSON.stringify(poiObj.data)}`);
          };

          // 可以存起来，以后需要时再添加。
          console.log("poi position", this.drawer.getPoi(1).position); // 获取第一个poi
          console.log("poi position", poiObj.position);
        }
      }

      removePoi(poiObj) {
        this.drawer && this.drawer.remove(poiObj);
      }

      dispose() {
        this.exitPoiMode();
        if (this.drawer) {
          this.drawer.clear();
          this.drawer.destory();
          this.drawer = null;
        }
      }
    }
  </script>
</body>

</html>